<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>
		</title>
	</head>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" href="../../css/userStyle.css">
		<script type="text/javascript" src="../../js/autocomplete.js" ></script>
		<link rel="stylesheet" href="../../css/autocomplete.css">
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<script type="text/javascript" src="../../layui/layui.all.js"></script>		
	<script>
		var proposals = [""];
		$(function() {
			$(".exit").click(function() {
				var userEmail = localStorage.getItem("userEmail");
				localStorage.removeItem("userEmail");
				if(userEmail==null){
					alert("您还未登录,请先登录")
					window.location.href="UserLogin.html";
				}else{
				$.ajax({
					type: "get",
					url: "/server/admin/userExit",
					async: true,
					data: {
						userEmail: userEmail,
					},
					success: function(data) {
						localStorage.removeItem("userEmail");
						localStorage.removeItem("userId")
						window.location.href = "UserLogin.html"
					}
				});					
				}
			});

			$(document).ready(function() {
				$('#search-form').autocomplete({
					hints: proposals,
					onSubmit: function(text) {
						$('#message').html('Selected: <b>' + text + '</b>');
					}
				});
			});
			
		})
		
		
		
		function myFunction() {
			proposals.splice(0,proposals.length);
			var userName = $(".input").val();
			$.ajax({
				type: "get",
				url: "/server/activity/getActivityName",
				async: false,
				data: {
					activityName: userName,
				},
				success: function(data) {
					console.log(data.msg)
					if("OK" == data.msg && proposals[0] == null) {
						for(var i = 0; i < data.data.length; i++) {
							console.log(data.data.length)
							proposals.push(data.data[i].activityName)
						}
					}

					console.log(proposals)
				}
			});
		} 
	</script>
	<style>
		.input {
			width: 250px;
			height: 30px;
			border: 1px solid #ccc;
			padding: 7px 0px;
			border-radius: 15px;
			padding-left: 5px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
		}
		
		.input:focus {
			border-color: red;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
		}
	</style>

	<body style="margin: 0px 0px;">
		<div style="width: 100%; height: 80px; background-color: aqua;position:fixed;top:0px;left:0px">
			<div style="height: 100%;width: 10%; background-color: red; margin-left: 5px; float: left;">
				<img src="../../img/HaiBaLogo.png" style="height: 100%; width: 100%;" />
			</div>
			<div id="search-form" style="color: red; height: 100%;width: 18%; float: left; text-align:center;line-height:75px;margin-left: 20%;">
				<input class="input" placeholder="查找活动" type="text" oninput="myFunction()" />
			</div>
			<a href="/ComeOnProject01/html/userActivity.html"  target="_parent">
				<div style="height: 100%;width: 10%; float: left; margin-left: 5%; text-align:center;line-height:75px ;">活动中心</div>
			</a>
			<a href="/ComeOnProject01/renchunxu/personal.html" target="_parent">
				<div style="height: 100%;width: 10%; float: left; margin-left: 10px; text-align:center;line-height:75px ;">个人中心</div>
			</a>
			<a class="exit" href="UserLogin.html"  target="_parent">
				<div style="height: 100%;width: 10%; float: left;  text-align:center;line-height:75px; margin-left: 10px;">
					退出
				</div>
			</a>

		</div>
	</body>

</html>